<template>
  <div class="container-layer-tabbar">
    <div class="item-tabbar">
      <van-tabbar active-color="#07c160" inactive-color="#000">
        <van-tabbar-item v-for="(temp, index) in list_router" :key="index" info @click="routerLink(temp)">
          <img slot="icon" :src="nowPage == index ? list_icon[temp].active : list_icon[temp].normal">
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    nowPage: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      list_router: ['home', 'type', 'cart', 'my'],
      list_icon: {
        home: {
          normal: './static/home-un.png',
          active: './static/home.png'
        },
        type: {
          normal: './static/search-un.png',
          active: './static/search.png'
        },
        cart: {
          normal: './static/cart-un.png',
          active: './static/cart.png'
        },
        my: {
          normal: './static/my-un.png',
          active: './static/my.png'
        }
      }
    }
  },
  methods: {
    routerLink(name) {
      if (name === this.list_router[this.nowPage]) {
        return console.log('就是当前页了')
      }
      this.$router.push({ name })
    }
  }
}
</script>

<style lang="less">
.container-layer-tabbar {
  height: 50px;
  .item-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .van-tabbar-item__icon {
    margin-top: 8px;
    margin-bottom: auto !important;
  }
  .van-tabbar-item__icon img {
    display: block;
    height: 40px;
  }
}
</style>
